import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import {
    AppOutline,
    AppstoreOutline,
    TruckOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

class Tabber extends Component {
    state = {
        tabs: [
            {
                key: '/index/home',
                title: '店铺',
                icon: <AppOutline />
            },
            {
                key: '/index/cate',
                title: '分类',
                icon: <AppstoreOutline />,
            },
            {
                key: '/index/goods/282657',
                title: '全部商品',
                icon: <UnorderedListOutline />
            },
            {
                key: '/index/cart',
                title: '购物车',
                icon: <TruckOutline />
            },
            {
                key: '/index/mine',
                title: '个人中心',
                icon: <UserOutline />
            },
        ]
    }
    handleChange(key){
        // console.log(this.props);
        this.props.history.push(key);
    }
    render() {
        return (
            <div className='tabber'>
                {/* TabBar 组件 */}
                <TabBar onChange={(key)=>{this.handleChange(key)}} activeKey={this.props.history.location.pathname}>
                    {
                        this.state.tabs.map((item,index) => {
                            return (
                                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                            )
                        })
                    }
                </TabBar>
            </div>
        );
    }
}

export default withRouter(Tabber);